<html>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .outer {
      margin-top: 30px;
    }
    .inner {
      margin-top: 50px;
      background-color: #caa;
      width: 100px;
      height: 100px;
    }
    .item {
      width: 200px;
      height: 200px;
      float: left;
      /* 所有item都是左浮动的，所以正常情况下他们的父元素是没有高度的 */
      background-color: #dda;
      margin: 10px;
    }

    .outer2 {
      overflow: hidden;
      /* 但是这里用 overflow: hidden 让outer2变成了块级格式上下文(BFC)因此也有了高度 */
    }
    .item2 {
      background-color: lightblue;
    }
  </style>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="outer2" id="outer2">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
    </div>
    <script>
      function* gen() {
        var u1 = "https://api.github.com/users/github";
        var r1 = yield fetch(u1);
        console.log("bio:", r1.bio);

        let u2 = "https://api.github.com/";
        const r2 = yield fetch(u2);
        console.log("current_user_url:", r2.current_user_url);

        let u3 = "https://api.github.com/user";
        const r3 = yield fetch(u3);
        console.log("documentation_url:", r3.documentation_url);
      }

      function run(gen) {
        const g = gen();

        function next(data) {
          const res = g.next(data);
          if (res.done) return;
          res.value
            .then((d) => d.json())
            .then((d) => {
              next(d);
            });
        }

        next();
      }

      run(gen);
    </script>
  </body>
</html>
